<template>
  <div>
    <!-- 卡片视图 -->
    <el-card shadow="always">
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>财务</el-breadcrumb-item>
        <el-breadcrumb-item>报销员财务</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 搜索框 -->
      <el-input
        style="width:280px;"
        placeholder="请输入代报员姓名"
        class="search"
        v-model="searchData"
        clearable
      >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>>
        <el-button slot="append" @click="searchBtn" :disabled="isDisabled"
          >搜索</el-button
        >
      </el-input>
      <!-- 数据列表 -->
      <el-table :data="tableData" border @row-click="showDetails">
        <el-table-column type="index" label="#" width="75"></el-table-column>
        <el-table-column prop="name" label="代报员姓名"></el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column prop="photo" label="头像">
          <template slot-scope="scope">
            <img style="width:50px;height:50px" :src="`${scope.row.photo}`" />
          </template>
        </el-table-column>
        <el-table-column prop label="累计结算金额"></el-table-column>
        <!-- <el-table-column prop="yue" label="余额"></el-table-column>
                <el-table-column prop="ytx" label="已提现"></el-table-column>
        <el-table-column prop="shouyi" label="收益"></el-table-column>-->
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="p"
        :page-sizes="[10, 20, 50, 80]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      ></el-pagination>
    </el-card>
    <el-dialog
      class="details"
      title="详情"
      style="padding:0 10px;"
      :visible.sync="dialogDetails"
      width="60%"
      @submit.native.prevent
    >
      <!-- <div><span>订单编号:</span><span>{{'123456789123456789'}}</span></div>
            <div><span>类型:</span><span>{{'结算'}}</span></div>
            <div><span>金额:</span><span>{{'100.00'}}</span></div>
      <div><span>时间:</span><span>{{'2020-09-20 14：15：16'}}</span></div>-->
      <el-table :data="detailsData" style="max-height:200px;overflow: auto;">
        <el-table-column label="编号" prop="number"></el-table-column>
        <el-table-column
          label="类型"
          prop="type_title"
          width="100"
        ></el-table-column>
        <el-table-column
          label="金额"
          prop="money"
          width="100"
        ></el-table-column>
        <el-table-column label="时间" width="200">
          <template slot-scope="scope">
            <p style="margin-left: 10px">{{ scope.row.info.created_at }}</p>
          </template>
        </el-table-column>
        <el-table-column label="头像">
          <template slot-scope="scope">
            <img :src="scope.row.info.photo">
          </template>
        </el-table-column>
        <!--  -->
        <el-table-column label="姓名">
          <template slot-scope="scope">
            <p style="margin-left: 10px">{{ scope.row.info.name }}</p>
          </template>
        </el-table-column>
        <el-table-column label="手机号" prop="info.phone"> </el-table-column>
        <el-table-column label="是否为管理员">
          <template slot-scope="scope">
            {{ scope.row.info.isAdmin == 1 ? "是" : "否" }}
          </template>
        </el-table-column>
        
      </el-table>
      <div class="details_floot">
        <el-button @click="dialogDetails = false">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { get } from "../../../../public/API/query";
import config from "../../../../public/config";

export default {
  data() {
    return {
      //列表数据
      tableData: [],
      //查询参数
      p: 1,
      limit: 10,
      dialogDetails: false,
      //总条数
      count: null,
      currentPage4: 1,
      searchData: "",
      value: [],
      treeData: [],
      addGroupForm: {
        title: "",
      },
      //默认选择节点ID数组
      defaultKeys: [],
      isDisabled: false,
      userId: "",

      detailsData: [
        {
          ddnum: "12345679812346",
          type: "结算",
          price: "200.00",
          time: "2020-09-20 14：15：16",
        },
      ],
      detailsInfo: null,
    };
  },
  component: {},
  methods: {
    showDetails(value) {
      get("finance/errandFinance/detail", { id: value.id }, (res) => {
        let { info, result } = res.data;
        result.forEach((item) => {
          item.info = info;
        });
        this.detailsInfo = info;
        this.detailsData = result;
        this.dialogDetails = true;
      });
    },
    //设置权限
    setRights(value) {},
    // 重置节点ID数组
    setRightDialogClose() {
      this.defaultKeys = [];
    },
    //提交权限按钮
    commitRightsBtn() {},
    //获取用户组列表数据
    getTableData() {},
    handleSizeChange(newSize) {
      this.limit = newSize;
      this.getTableData();
    },
    handleCurrentChange(newPage) {
      this.p = newPage;
      this.getTableData();
    },
    //搜索功能
    searchBtn() {
      this.getTableData();
    },
    //获取数据
    getTableData() {
      if (this.searchData) {
        get(
          "finance/errandFinance/index",
          {
            p: this.p,
            limit: this.limit,
            title: this.searchData,
          },
          (res) => {
            this.tableData = res.data._list;
            this.count = res.data.count;
          }
        );
      } else {
        get(
          "finance/errandFinance/index",
          {
            p: this.p,
            limit: this.limit,
          },
          (res) => {
            this.tableData = res.data._list;
            this.count = res.data.count;
          }
        );
      }
    },
  },
  watch: {
    searchData: function() {
      if (!this.searchData) {
        this.getTableData();
      }
      if (this.searchData) {
        this.isDisabled = false;
      }
    },
  },

  created() {
    this.getTableData();
  },
};
</script>

<style lang="less" scoped>
.el-breadcrumb {
  margin-bottom: 30px;
}
.el-input {
  margin-bottom: 30px;
  width: 280px;
  margin-right: 30px;
}
.el-pagination {
  margin-top: 30px;
}
.addRulesWrap {
  margin-left: 80px;
}
.addRules {
  position: absolute;
  right: 25%;
  bottom: 5%;
}
.disable {
  margin-left: 15px;
}
.details {
  width: 100%;
  div {
    margin: 7px 0;
  }
  span:nth-child(1) {
    text-align: left;
    width: 30%;
  }
  span:nth-child(2) {
    text-align: right;
    width: 70%;
  }
  .details_floot {
    margin-top: 20px;
    width: 100%;
    text-align: center;
  }
}
</style>
